<template>
    <div ref="resizeTarget">
        <h1>碳排放数据录入</h1>
        <el-button type="primary" @click="addFuelType">添加燃料类型</el-button>
 <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="40%">
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="燃料类型">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="原煤" name="type"></el-checkbox>
      <el-checkbox label="洗精煤" name="type"></el-checkbox>
      <el-checkbox label="天然气" name="type"></el-checkbox>
      <el-checkbox label="液化石油气" name="type"></el-checkbox>
      <el-checkbox label="汽油" name="type"></el-checkbox>
      <el-checkbox label="柴油" name="type"></el-checkbox>
    </el-checkbox-group>
    </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="dialogVisible=false">取消</el-button>
  </el-form-item>
 </el-form>
</el-dialog>
   <el-table
    :data="tableData"
    style="width: 100%"
    max-height="500">
    <el-table-column
      fixed
      prop="lei"
      label="类型"
      width="150">
    </el-table-column>
      <el-table-column
        prop="hao"
        label="消耗值(t/10^4m^3)"
        width="200">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.hao"
            @input="handleInput(scope.$index, 'hao', $event,scope.row)">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="CO2">
        <el-table-column
      prop="co2"
      label="排放量(t)"
      width="150">
    </el-table-column>
        <el-table-column
          prop="pai"
          label="排放因子"
          width="150">
        </el-table-column>
      </el-table-column>
      <el-table-column label="CH4">
        <el-table-column
      prop="ch4"
      label="排放量(kg)"
      width="150">
    </el-table-column>
        <el-table-column
          prop="pai"
          label="排放因子"
          width="150">
        </el-table-column>
      </el-table-column>
      <el-table-column label="NO2">
        <el-table-column
      prop="no2"
      label="排放量(kg)"
      width="150">
    </el-table-column>
        <el-table-column
          prop="pai"
          label="排放因子"
          width="150">
        </el-table-column>
      </el-table-column>
  </el-table> 
   <!-- 添加一个计算后的总结排放量 -->
   <div class="summary">
    <p>CO2 总排放量：{{ totalCo2 }} t</p>
    <p>CH4 总排放量：{{ totalCh4 }} kg</p>
    <p>NO2 总排放量：{{ totalNo2 }} kg</p>
    <el-button v-if="totalCo2 !== 0.00 || totalCh4 !==0.00 || totalNo2 !==0.00" type="primary" @click="tijiao">提交碳排放数据报告</el-button>
  </div>
</div>
  </template>
  
  <script>
  import _ from 'lodash';
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      },
      addFuelType() {
        this.form.type = [...new Set(this.tableData.map(item => item.lei))];
        this.dialogVisible=true;
    },
    onSubmit(){
        this.tableData=[];
        this.form.type.forEach((leiName) => {
  this.tableData.push({
    lei: leiName,
    hao: '0',
    co2: '0',
    ch4: '0',
    no2: '0',
    pai: "缺省值",
  });
});
this.dialogVisible=false;
    },
    tijiao(){
      this.$message({
        message:"提交成功",
        type:"success"
      })
    },
      handleInput(index, key, value,row) {
        // 更新当前行对应属性的值
        this.tableData[index][key] = value;
        this.calculateEmissions(index,row)
        this.calculateTotalEmissions();
      },
      calculateEmissions(index, row) {
      // 假设我们有一个固定的排放因子对象
      const emissionFactors = {
        原煤: { co2Factor: 1.98, ch4Factor: 0.21, no2Factor: 0.031 },
        洗精煤: { co2Factor: 2.41, ch4Factor: 0.26, no2Factor: 0.039 },
        天然气: { co2Factor: 21.62, ch4Factor: 0.38, no2Factor: 0.039 },
        液化石油气: { co2Factor: 3.10, ch4Factor: 0.05, no2Factor: 0.005 },
        汽油: { co2Factor: 2.92, ch4Factor: 0.12, no2Factor: 0.025 },
        柴油: { co2Factor: 3.09, ch4Factor: 0.12, no2Factor: 0.025 },
        // 其他燃料类型的排放因子...
      };

      // 获取当前行数据
      const fuelType = row.lei;
      const consumption = parseFloat(row.hao);

      // 根据消耗值和排放因子计算排放量
      row.co2 = consumption * emissionFactors[fuelType].co2Factor;
      row.ch4 = consumption * emissionFactors[fuelType].ch4Factor;
      row.no2 = consumption * emissionFactors[fuelType].no2Factor;
    },
    calculateTotalEmissions() {
      let totalCo2 = 0;
      let totalCh4 = 0;
      let totalNo2 = 0;

      this.tableData.forEach((item) => {
        totalCo2 += item.co2;
        totalCh4 += item.ch4;
        totalNo2 += item.no2;
      });

      this.totalCo2 = totalCo2.toFixed(2);
      this.totalCh4 = totalCh4.toFixed(2);
      this.totalNo2 = totalNo2.toFixed(2);
    },
      // ... 其他方法 ...
    },
  
    data() {
      return {
        dialogVisible:false,
        form:{
            type:[],
        },
        tableData: [{
          lei: '原煤',
          hao: '0',
          co2: '0',
          ch4: '0',
          no2: '0',
          pai: "缺省值"
        },
        {
          lei: '汽油',
          hao: '0',
          co2: '0',
          ch4: '0',
          no2: '0',
          pai: "缺省值"
        }, 
        {
          lei: '天然气',
          hao: '0',
          co2: '0',
          ch4: '0',
          no2: '0',
          pai: "缺省值"
        },  ],
        totalCo2: 0,
      totalCh4: 0,
      totalNo2: 0,
      }
    },
    mounted() {
    this.handleResize = _.debounce((entries) => {
      entries.forEach(entry => {
        // 观察到尺寸变化后的处理逻辑
        const { width, height } = entry.contentRect;
        console.log('Element resized to:', width, height);
        // 在这里执行需要响应尺寸变化的操作
      });
    }, 50);

    this.resizeObserver = new ResizeObserver(this.handleResize);
    
    // 获取模板中定义了 ref 属性的元素
    const resizeTarget = this.$refs.resizeTarget;
    if (resizeTarget) {
      this.resizeObserver.observe(resizeTarget);
    }
  },
  beforeDestroy() {
    // 当组件销毁前，记得移除观察者以避免内存泄漏
    if (this.resizeObserver) {
      this.resizeObserver.unobserve(this.$refs.resizeTarget);
      this.resizeObserver.disconnect();
    }
  }
  }
  
  </script>